<template>
  <div class="JNPF-common-layout">
    <div class="JNPF-common-layout-center">
      <el-row class="JNPF-common-search-box" :gutter="16">
        <el-form @submit.native.prevent label-width="80px" label-position="left">
          <el-col :span="8">
            <el-form-item label="报警日期" style="height:30px">
        <el-date-picker
          v-model="alarmdate"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"/>
      </el-form-item>
          </el-col>
          <el-col :span="8">
             <el-form-item label="存放地点">
              <el-select style="display: inline-block" clearable filterable v-model="listQuery.fpointNo" class="filter-item" placeholder="请选择存放地点">
                <el-option
                v-for="item in getListfpointNo"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
              </el-select>
             </el-form-item>
          </el-col>
          <template v-if="showAll">
            <el-col :span="8">
             <el-form-item label="管理柜">
        <el-select v-model="listQuery.cabFequipmentbarcode" clearable filterable class="filter-item" placeholder="请选择管理柜">
          <el-option v-for="item in boxFequipmentbarcodeList" :key="item.fequipmentbarcode" :label="item.fequipmenttag" :value="item.fequipmentbarcode"/>
        </el-select>
      </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="储物柜">
              <el-select
                v-model="listQuery.boxFequipmentbarcode"
                class="filter-item"
                clearable
                placeholder="请选择储物柜"
              >
                <el-option
                  v-for="item in cablists"
                  :key="item.index"
                  :label="item.fequipmenttag"
                  :value="item.fequipmentbarcode"
                />
              </el-select>
            </el-form-item>
          </el-col>
          </template>
          <el-col :span="8">
            <el-form-item>
        <el-button
        type="primary"
          @click="handleFilter"
          >查找</el-button
        >
        <el-button type="text" icon="el-icon-arrow-down" @click="showAll=true"
                v-if="!showAll">展开</el-button>
              <el-button type="text" icon="el-icon-arrow-up" @click="showAll=false" v-else>
                收起</el-button>
      </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div class="JNPF-common-layout-main JNPF-flex-main">
       <!-- 主表查询结果 -->
    <JNPF-table
      v-loading="listLoading"
      :data="list"
    >
      <el-table-column
        :width="buttonColor.line"
        :index="indexMethod"
        align="center"
        label="序"
        type="index"
      />
      <el-table-column width="100" :formatter="datetimeFormat" align="left" label="日盘日期" prop="fcheckdate" />
      <el-table-column
        width="120"
        align="left"
        label="存放地点"
        prop="fpointName"
      />
      <el-table-column
        width="120"
        align="left"
        label="管理柜"
        prop="fconname"
      />
      <el-table-column
        width="130"
        align="left"
        label="储物柜"
        prop="fcabname"
      />
      <el-table-column
        width="130"
        align="left"
        label="储物仓"
        prop="fboxname"
      />
      <el-table-column
        width="160"
        align="left"
        label="容器标签"
        prop="frfidbarcode"
      />
      <el-table-column
        width="120"
        align="left"
        label="物料名称"
        prop="fgoodname"
      />
      <el-table-column
        width="100"
        :formatter="datetimeFormat"
        align="left"
        label="生产日期"
        prop="fprocdate"
      />
      <el-table-column
        align="left"
        label="报警内容"
        prop="fmessage"
      />
    </JNPF-table>
    <paginations
	:total="total"
	:page.sync="listQuery.currentPage"
	:limit.sync="listQuery.pageSize"
	/>
      </div>
    </div>
  </div>
</template>
<script>
import request from '@/utils/request'
import { getListArea ,fsiteOptionsByLevel} from "@/api/area";
import moment from "moment";
import { tableColor,buttonColor,titleColor} from "@/filters/index";
import { listRoom } from '@/api/room'
import { listtsBox } from "@/api/tsBox";
import { listtsCabinet } from "@/api/tsCabinet";

const siteTypeMap = {
  1: "设备报警",
  2: "空气报警",
  3: "用电报警",
  // 0: "全部类型",
};

export default {
  name: "cabAlarmDailyCheck1",
  filters: {
    siteTypeFilter(type) {
      return siteTypeMap[type];
    },
  },
  data() {
    return {
      cablists: [],
      getListfpointNo: [],
      cabDialogFsiteNo: null,
      cabinetVisible:false,
      showAll:false,
      boxFequipmentbarcodeList:[],
      getListflevelno:[],
      ftypeList:[],
      titleColor,
      selectListlab:[],
      searchVisiblelab: false,
      searchListlab: null,
      listLoadingSearchlab: true,
      totalSearchlab: 0,
      listQuerySearchlab: {
        page: 1,
        limit: 20,
        fpointName: undefined,
        sort: 'create_time',
        order: 'desc'
      },
      siteTypeMap,
      searchFlag:'',
      searchFlaglab:'',

      list: null,
      total: 0,
      listLoading: true,
      alarmdate: null,
      listQuery: {
        page: 1,
        limit: 20,
        fsiteNo: undefined,
        fbegdate: undefined,
        fenddate: undefined,
        ftype: 112,
        fpointNo: undefined,
        fpointNoName: undefined,
        boxFequipmentbarcode: undefined,
        cabFequipmentbarcode: undefined,
        sort: "fcheckdate",
        order: "desc",
      },
      tableColor,
      buttonColor,
    };
  },
   created() {
    this.listQuery.fsiteNo = this.$store.state.user.fsiteNo;
    this.alarmdate = [new Date(), new Date()]
    this.getList();
      // 预约地点
      this.getSearchListlab()
        getListArea({flag:10,arg1:this.$store.state.user.fsiteNo})
      .then(response => {
        this.getListfpointNo = response.data.data.list
      })
      .catch(() => {
        this.getListfpointNo = []
      })

      // 检查项目
      getftype({flag:28,arg1:3009})
        .then((response) => {
          this.ftypeList = response.data.data.list
        })
        .catch(() => {
          this.ftypeList = [];
        });

      // 管理柜
        listtsBox({limit: -1,fsiteNo:this.$store.state.user.fsiteNo})
        .then((response) => {
          this.boxFequipmentbarcodeList = response.data.data.list;
        })
        .catch(() => {
          this.boxFequipmentbarcodeList = [];
        });

      // 储物柜
        listtsCabinet({limit: -1,fsiteNo:this.$store.state.user.fsiteNo})
      .then((response) => {
        this.cablists =response.data.data.list
      })
      .catch(() => {
        this.cablists = [];
      });


  },
  methods: {
    parserDate(date) {
      var t = Date.parse(date)
      if (!isNaN(t)) {
        return new Date(Date.parse(date.replace(/-/g, '/')))
      }
    },
      // 储物柜弹出框
    searchDialogcabinet() {
      this.cabinetVisible = true
      this.cabDialogFsiteNo = this.$store.state.user.fsiteNo
    },

    // 储物柜弹出框
    cabinetDialogValue(value){
        this.listQuery.boxFequipmentbarcode = value.info.fequipmentbarcode
    },

    // 预约地点获取搜索列表
    getSearchListlab() {
      this.listLoadingSearchlab = true
      const temp = {
        fsiteNo:this.$store.state.user.fsiteNo,
        fpointFlag:0,
        page:this.listQuerySearchlab.page,
        limit:this.listQuerySearchlab.limit,
        sort: 'create_time',
        order: 'desc',
        fpointName:this.listQuerySearchlab.fpointName,
      }

       listRoom(temp)
      .then(response => {
        this.searchListlab = response.data.data.list
        this.totalSearchlab = response.data.data.total
          this.listLoadingSearchlab = false
      })
      .catch(() => {
        this.searchListlab = []
        this.totalSearchlab = 0
          this.listLoadingSearchlab = false
      })

    },

    // 预约地点获取搜索列表
    searchFilterlab() {
      this.listQuerySearchlab.page = 1
      this.getSearchListlab()
    },
    // 预约地点获取搜索列表
    searchDatalab(row) {
      this.searchVisiblelab = false
        this.listQuery.fpointNo = row.fpointNo
        this.listQuery.fpointNoName = row.fpointName
    },

    // 预约地点获取搜索列表
    searchDialoglab(data) {
      this.searchFlaglab = 'search'
      this.searchVisiblelab = true
    },

  formatflevelno: function(row, column) {
      if(this.getListflevelno){
        for (let i = 0; i < this.getListflevelno.length; i++) {
        if (row.flevelno === this.getListflevelno[i].value) {
          return this.getListflevelno[i].label
        }
      }
      return ''
      }else{
      return ''
      }
    },

    datetimeFormat(row, column) {
      const date = row[column.property];
      if (date === undefined || date === null) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD");
    },
     formatDate: function(date) {
      if(typeof(date)==='object'){
         var ym
      var y = date.getFullYear()
      var m = date.getMonth() + 1
      var d = date.getDate()
      if (m < 10) {
        m = '0' + m
      }
      if (d < 10) {
        d = '0' + d
      }
      ym = '' + y + m + d
      return ym
      }else{
        return date
      }

    },
    getList() {
      this.listQuery.fbegdate = this.alarmdate == null ? null : this.formatDate(this.alarmdate[0])
      this.listQuery.fenddate = this.alarmdate == null ? null : this.formatDate(this.alarmdate[1])
      this.listLoading = true;

      getDayPatrolAlarm(this.listQuery)
        .then((response) => {
          this.list = response.data.data.list
          this.total = response.data.data.total
          this.listLoading = false
        })
        .catch(() => {
          this.list = [];
          this.total = 0;
          this.listLoading = false;
        });
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    indexMethod(index) {
      index = index + 1;
      return index;
    },
  },
};

export function getDayPatrolAlarm(query) {
  return request({
    url: '/phone/getDayPatrolAlarm2',
    method: 'get',
    params: query
  })
};

export function getftype(query) {
  return request({
    url: '/data/area/getList',
    method: 'get',
    params: query
  })
}

</script>